<template>
  <div class="StudentSide h-100">
    <el-image class="w-100 h-100" :src="url" fit="cover"></el-image>
    <div class="position-absolute top bottom w-100 p-5">
      <div class="row h-100">
        <div class="col-5">
          <el-card class="opacitybg1 rounded-bottom-0 py-2 px-3">
            <div class="row">
              <div class="col-auto pr-0 pt-1">
                <el-avatar :size="50" :src="avatarUrl" fit="cover"></el-avatar>
              </div>
              <div class="col">
                <h6 class="mb-1">张小花</h6>
                <p class="small mb-0 opacity-50">班级：小苹果班</p>
                <p class="small mb-0 opacity-50 din_alternatebold">账号：zangxiaohu</p>
              </div>
              <div class="col-auto d-flex align-items-center pt-2">
                <el-tooltip class="item" effect="dark" content="修改个人信息" placement="top">
                  <span class="iconfont lwedit_solid h3 hand"></span>
                </el-tooltip>
                <el-divider direction="vertical" class="mb-2"></el-divider>
                <el-tooltip class="item" effect="dark" content="系统设置" placement="top">
                  <span class="iconfont lwnav_system h4 hand"></span>
                </el-tooltip>
                <el-divider direction="vertical" class="mb-2"></el-divider>
                <el-tooltip class="item" effect="dark" content="退出登录" placement="top">
                  <span class="iconfont lwgoOut h4 hand" @click="goOut"></span>
                </el-tooltip>
              </div>
            </div>
          </el-card>
          <el-card class="mb-4 opacitybg2 rounded-top-0">
            <div class="row text-center px-4 pt-2">
              <div class="col px-0">
                <h1 class="din_alternatebold text-din-data mb-0">49</h1>
                <p class="small opacity-50">上课总次数</p>
              </div>
              <div class="col px-0">
                <h1 class="din_alternatebold text-din-data mb-0">6</h1>
                <p class="small opacity-50">小班课</p>
              </div>
              <div class="col px-0">
                <h1 class="din_alternatebold text-din-data mb-0">11</h1>
                <p class="small opacity-50">直播课</p>
              </div>
              <div class="col px-0">
                <h1 class="din_alternatebold text-din-data mb-0">32</h1>
                <p class="small opacity-50">点播课</p>
              </div>
            </div>
          </el-card>

          <div class="position-absolute left right px-3 bottom overflow-hidden" style="top:270px;">
            <el-card class="opacitybg3 h-100 position-relative">
              <div slot="header">
                <div class="row">
                  <div class="col">
                    <span class="small font-weight-bold">近期课程</span>
                  </div>
                  <!-- <div class="col-auto">更多</div> -->
                </div>
              </div>
              <div
                class="position-absolute left right text-dark overflow-y bottom p-3"
                style="top:61px;"
              >
                <div v-for="o in 3" class="pb-3">
                  <el-card shadow="never" class="border-0 hand" :body-style="{ padding: '0px' }">
                    <div class="p-3 row">
                      <div class="col-4 pr-0">
                        <img :src="course" class="w-100" alt />
                      </div>
                      <div class="col">
                        <h6 class="mb-0">XXX课程名称（小班课）</h6>
                        <p class="small mb-0 text-secondary">
                          课程时间：
                          <span class="din_alternatebold">2020-03-10 15:00</span>
                        </p>
                        <p class="small mb-0 text-secondary">本节课主要讲解动词的最佳用常……</p>
                      </div>
                    </div>
                  </el-card>
                </div>
              </div>
            </el-card>
          </div>
        </div>
        <div class="col">
          <el-card class="h-100 opacitybg3 text-dark position-relative">
            <div slot="header">
              <div class="row">
                <div class="col">
                  <span class="small font-weight-bold">点播课程</span>
                </div>
                <div class="col-auto">
                  <span class="iconfont lwlump_display h4 m-0 text-white hand"></span>
                  <el-divider direction="vertical" class="mb-2"></el-divider>
                  <span class="iconfont lwlist_display h4 m-0 hand"></span>
                </div>
              </div>
            </div>
            <div class="position-absolute bottom overflow-y left right p-3" style="top: 61px;">
              <!-- <p class v-for="o in 43">fdsfds</p> -->
              <div class="row px-2">
                <div class="col-4 pb-3 px-2 hand" v-for="o in 23" @click="goVideo">
                  <!-- <img :src="course" class="w-100 rounded" alt /> -->
                  <el-card :body-style="{ padding: '0px' }" class="border-0">
                    <img :src="course" class="image" />
                    <div class="p-3">
                      <span class="small font-weight-bold">XXX课程名称（小班课）</span>
                    </div>
                  </el-card>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <!--底部选择主题-->
    <div class="position-absolute bottom right pb-2 pr-5">
      <el-popover placement="bottom" width="300" trigger="click">
        <h6 class="small font-weight-bold">选择主题</h6>
        <div class="row px-2 pt-2">
          <div class="col-4 pb-2 px-2" v-for="o in 15">
            <el-image class="hand" :src="themes" fit="cover"></el-image>
          </div>
        </div>
        <div slot="reference" class="row p-1 rounded-100 bottom-img hand mx-0">
          <div class="col-auto p-0">
            <el-image
              class="rounded-circle m-0"
              style="width: 26px; height: 26px"
              :src="url"
              fit="cover"
            ></el-image>
          </div>
          <div class="col">
            <span class="small">更多主题</span>
          </div>
        </div>
      </el-popover>
    </div>
  </div>
</template>

<script>
export default {
  name: "StudentSide",
  data() {
    return {
      url: "https://homeweb.oss-cn-beijing.aliyuncs.com/assets/bgimg/bg004.jpg",
      avatarUrl:
        "https://gejubusinessbucket.oss-cn-beijing.aliyuncs.com/gejubusinessbucket/2019-12-10/8e53cfa40bf0e235b5e874f1e5f68ed5.png",
      course:
        "https://gejubusinessbucket.oss-cn-beijing.aliyuncs.com/gejubusiness/2019-12-26/53ee24fbb20951c51e84e696be83b5fc.jpg",
      themes:
        "https://homeweb.oss-cn-beijing.aliyuncs.com/assets/minibgimg/bg004.jpg"
    };
  },
  methods: {
    goOut() {
      this.$router.push("/login/inputLogin");
    },
    goVideo() {
      this.$router.push("/video");
    }
  }
};
</script>

<style>
.StudentSide .el-card.opacitybg1 {
  border: none;
  background-color: rgba(255, 255, 255, 0.8);
}
.StudentSide .el-card.opacitybg2 {
  border: none;
  background-color: rgba(255, 255, 255, 0.5);
}
.StudentSide .el-card.opacitybg3 {
  border: none;
  background-color: rgba(255, 255, 255, 0.3);
}
.StudentSide .el-card .el-card__header {
  border-bottom: 1px rgba(255, 255, 255, 0.3) solid;
}
.StudentSide .el-card__header {
  padding: 18px 20px 11px;
}
.StudentSide .bottom-img {
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
}
.StudentSide .bottom-img .el-image {
  display: block;
}
</style>